<template>
  <div class="register_container">
    <div class="register_box">
      <el-form
        :model="form.data"
        status-icon
        :rules="rules"
        ref="form.data"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="account">
          <el-input v-model="form.data.account" placeholder="请输入账号" prefix-icon="el-icon-user"/>
        </el-form-item>

        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.data.name" placeholder="请输入姓名" prefix-icon="el-icon-postcard" />
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="form.data.password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="form.data.checkPass" placeholder="请确认密码" prefix-icon="el-icon-lock" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.data.email" placeholder="请输入邮箱" prefix-icon="el-icon-message" />
        </el-form-item>

        <el-form-item label="手机" prop="phone"  prefix-icon="iconfont icon-user" >
          <el-input
            v-model="form.data.phone"
            placeholder="请输入手机号"
            prefix-icon="el-icon-phone-outline"
          />
        </el-form-item>

        <el-form-item label="学号" prop="number">
          <el-input
            v-model="form.data.number"
            placeholder="请输入学号"
            prefix-icon="el-icon-coordinate"
          />
        </el-form-item>

        <el-form-item label="专业" prop="dept">
          <el-select v-model="form.data.dept" clearable placeholder="请选择专业">
            <el-option label="计算机" value="1"></el-option>
            <el-option label="艺术" value="2"></el-option>
            <el-option label="电气" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="班级" prop="classes">
          <el-select v-model="form.data.classes" clearable placeholder="请选择班级">
            <el-option label="软件1班" value="4"></el-option>
            <el-option label="软件2班" value="5"></el-option>
            <el-option label="软件3班" value="6"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="验证码" prop="check">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-input
                v-model="form.data.check"
                placeholder="请输入验证码"
                prefix-icon="el-icon-circle-check"
              />
            </el-col>
            <el-col :span="5">
              <el-button @click="sendOut">发送验证码</el-button>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('form.data')">提交</el-button>
          <el-button @click="return1">返回</el-button>
          <!-- resetForm('form.data') -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { register, getcheck } from "@/api/login/register.js";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.form.data.checkPass !== "") {
            this.$refs['form.data'].validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.data.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (value.length !== 11) {
        callback(new Error("电话号码位数不对"));
      } else {
        callback();
      }
    };
    return {
      form: {
        type: "register",
        data: {
          account: "lin",
          name: "林共富",
          password: "12345678",
          checkPass: "12345678",
          email: "2598343267@qq.com",
          phone: "15559176281",
          number: "316207010316",
          classes: "",
          dept: "",
          check: "",
        },
      },

      rules: {
        account: [
          { required: true, message: "请输入登录账号", trigger: "blur" },
          { min: 3, max: 10, message: "长度在3到10个字符", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入登录名称", trigger: "blur" },
          { min: 2, max: 5, message: "长度在2到5个字符", trigger: "blur" },
        ],
        password: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: validatePhone, trigger: "blur" },
        ],
        number: [
          { required: true, message: "请输入学号", trigger: "blur" },
          { min: 12, max: 12, message: "长度在12个数字", trigger: "blur" },
        ],
        dept:[
             { required: true, message: "请点击专业", trigger: "blur" },
        ],
        classes:[
             { required: true, message: "请点击班级", trigger: "blur" },
        ],
        check: [
          { required: true, message: "请输入验证", trigger: "blur" },
          { min: 4, max: 4, message: "长度在4个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          register({
        type: "register",
        data: {
         account: this.form.data.account,
          name: this.form.data.name,
          password: this.form.data.password,
          email: this.form.data.email,
          phone: this.form.data.phone,
          number: this.form.data.number,
          classes:this.form.data.classes,
          dept: this.form.data.dept,
          check: this.form.data.check,
        },
      })
        .then((response) => {
          console.log(response);
        })
        .catch((error) => {
          console.log(error.data);
        });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    sendOut() {
      getcheck({
        type: "getcheck",
        data: {
          email: this.form.data.email,
        },
      })
        .then((response) => {
          console.log(response);
        })
        .catch((error) => {
          console.log(error.data);
        });
    },
    return1(){
      this.$router.push("/login");
    }
  },
};
</script>


<style lang="scss" scoped>
.register_container {
  background: url("../../assets/register.jpg");
  background-size: cover;
  height: 100%;
}
.register_box {
  width: 400px;
  height: 700px;
  background-color: transparent;
  border-radius: 3px;
  position: absolute;
  left: 29%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.demo-ruleForm {
  position: absolute;
  width: 400px;
  padding: 0 20px;
  position: absolute;
  left: 45%;
  top: 50%;
  transform: translate(-50%, -50%);
}  
 /deep/ .el-form-item__label {
  color: black;
}
/deep/  .el-form-item__label::before{
  content: none;
}
</style>